<template>
  <view class="commission-detail-page">
    <view class="header">
      <view class="commission-info">
        <text>今日佣金: {{ todayCommission }}</text>
        <text>本周佣金: {{ weekCommission }}</text>
        <text>本月佣金: {{ monthCommission }}</text>
        <text>总佣金: {{ totalCommission }}</text>
      </view>
    </view>

    <view class="list-header">
      <text>等级</text>
      <text>人数</text>
      <text>金额</text>
      <text>佣金</text>
    </view>

    <view class="commission-list">
      <view class="commission-item" v-for="(item, index) in commissionItems" :key="index">
        <text>{{ item.level }}</text>
        <text>{{ item.numberOfPeople }}</text>
        <text>{{ item.amount }}</text>
        <text>{{ item.commission }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      todayCommission: 50, // 今日佣金
      weekCommission: 200, // 本周佣金
      monthCommission: 800, // 本月佣金
      totalCommission: 5000, // 总佣金
      commissionItems: [
        { level: 'VIP', numberOfPeople: 20, amount: 2000, commission: 500 },
        { level: 'Gold', numberOfPeople: 50, amount: 5000, commission: 1000 },
        // 可以添加更多佣金详情列表项
      ]
    };
  }
};
</script>

<style scoped>
/* 样式可根据实际需求进行调整 */
.commission-detail-page {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.commission-info {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f0f0f0;
  font-weight: bold;
}

.list-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f0f0f0;
  font-weight: bold;
}

.commission-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
</style>
